<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-row class="el-card-row outter-wrapper">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>出版专著信息</span>
        </div>
        <div class="text item">
          <!-- form表单 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="上报人：">
                  <el-input
                      v-model="form.email"
                      disabled
                      placeholder="XXX"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成果类型：">
                  <el-select
                      v-model="form.type"
                      placeholder="请选择成果类型"
                      disabled
                  >
                    <el-option label="出版专著" value="stuAward"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="教材名称：" prop="bname">
                  <el-input v-model="form.bname" placeholder="请输入教材名称(无需添加书名号)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="作者名称：" prop="bauthor">
                  <el-input v-model="form.bauthor" required="true" placeholder="请输入所有作者名称(以分号分隔)"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出版社：" prop="publisher">
                  <el-input v-model="form.publisher" placeholder="请输入出版社名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出版日期：" prop="publishdate">
                  <el-date-picker
                      v-model="form.publishdate"
                      type="date"
                      placeholder="请选择教材出版日期"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="字数：" prop="words">
                  <el-input v-model="form.words" placeholder="请输入教材字数(单位:千字)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排名：" prop="rankno">
                  <el-input v-model="form.rankno" placeholder="请输入您的排名"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="ISBN：" prop="ISBN">
                  <el-input v-model="form.ISBN" placeholder="请输入教材国际标准图书号ISBN"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="实证文件：" prop="file">
                <el-upload
                    class="upload-demo"
                    :file-list="form.filelist"
                    :show-file-list="true"
                    drag
                    action="http://www.baidu.com"
                    :http-request="uploadFile"
                    :on-change="addFile"
                    :before-upload="beforeUpload"
                    :multiple="false"
                    :auto-upload="false"
                    accept=".zip"
                    :limit="1"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传单个zip压缩文件,重复上传会导致文件覆盖
                  </div>
                </el-upload>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item>
                <el-button type="success" @click="onSubmit('form')">立即上报</el-button>
                <p class="upload-tip-info">退出后将不再保存此次填写的信息.</p>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row></el-container
  >
</template>

<script>
import * as UploadService from '@/service/upload/uploadService'
import * as IndexService from '@/service/index/indexService'
export default {
  name: 'publishTreatise',
  data() {
    return {
      form: {
        email: '', //上报人
        type: '出版专著',
        bname: '', //教材名称
        bauthor:"",//教材作者
        publishdate: '', //出版日期
        publisher:"",//出版社
        words:"",//字数-单位[千字]
        ISBN:"",//国际标准图书号-ISBN
        bplan:"",//规划教材
        rankno: '', //排名
        evidence: '', //鉴定结论
        file: '', //文件
        filelist: [],
      },
      //表单规则验证
      rules:{
        bname: [{required:true,message:"请输入教材名称",trigger:"blur"}],
        bauthor: [{required:true,message:"请输入教材作者姓名,以分号分隔",trigger:"blur"}],
        publishdate:[{required:true,message:"请选择出版日期",trigger:"blur"}],
        publisher: [{required:true,message:"请输入出版社名称",trigger:"blur"}],
        words:[{required:true,message:"请输入教材字数",trigger:"blur"}],
        ISBN:[{required:true,message:"请输入国际标准图书号(ISBN)",trigger:"blur"}],
        bplan:[{required:true,message:"请输入规划教材信息",trigger:"blur"}],
        rankno: [{required:true,message:"请输入您的排名",trigger:"blur"}],
        file:[{required:true,message:"请选择实证文件",trigger:"blur"}],
      }
    }
  },
  mounted() {
    //获取用户信息
    let email = localStorage.getItem('email')
    this.form.email = email ? email : 'XXX@xx.com'
  },
  methods: {
    //添加文件-添加文件、上传成功和上传失败时都会被调用
    addFile(file, fileList) {
      //记录文件名称
      this.form.file = file
      // console.log(this.form.file)
    },
    //文件上传之前文件类型检验
    beforeUpload(file) {
      // console.log(file)
    },
    //文件上传方法
    uploadFile(val) {
      // console.log(val)
    },

    //提交信息
    onSubmit(form) {
      // console.log('submit!')
      console.log(this.form)
      //表单验证
      this.$refs[form].validate((valid)=>{
        //判断是否验证通过
        if (valid){
          //验证通过
          //1-文件上传
          let formData = new FormData();
          formData.append("file",this.form.file.raw);//二进制文件内容
          formData.append("username",this.form.email);//上报信息账户名
          UploadService.uploadFile(formData).then(res=>{
            if (res.data&&res.data.status){
              //上传成功
              this.$message({
                message: '文件已上传！',
                type: 'success',
              })
              //2-获取文件远程链接地址
              this.form.evidence=res.data.url;
              //3-上传基本信息
              let publishTreatiseObj={
                bname:this.form.bname,
                bauthor:this.form.bauthor,
                publishdate:this.form.publishdate,
                publisher:this.form.publisher,
                words:this.form.words,
                ISBN:this.form.ISBN,
                "author.author":this.form.email,
                "author.rankno":this.form.rankno,
                "author.evidence":this.form.evidence,
              };
              IndexService.uploadPublishTreatise(publishTreatiseObj).then(res=>{
                if (res.data==1){
                  //信息上传成功
                  this.$message({
                    message:"信息上报成功!",
                    type:"success"
                  })
                }else {
                  //信息上传失败
                  this.$message.error("信息上报失败!")
                }
              })
            }else {
              //上传失败
              this.$message.error('文件上传出错,信息上报失败！')
            }
          }).catch(err=>{
            //文件上传出错
            this.$message.error('信息上报失败！');
            //尝试删除已上传的文件
            if (this.form.evidence){
              UploadService.deleteFile(this.form.email,this.form.evidence).then(res=>{
                if (res.data==1){
                  this.$message({
                    message: '已删除无效文件!',
                    type: 'success',
                  })
                }
              })
            }
          });
        }else{
          //验证失败
          this.$message.error('请检查并修改输入信息！')
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
.outter-wrapper{
  padding-top: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card-row {
  margin: 0 auto;
  width: 55%;
}

.box-card {
  /* width: 480px; */
}
.el-card__header span {
  color: #409eff;
  font-weight: 700;
}
.box-card:hover {
  /* width: 480px; */
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-button-sendcode {
  background-color: #17a2b8;
}

.el-select,
.el-date-editor {
  /* width: 346.5px; */
  width: 100%;
}
.upload-tip-info {
  color: #ccc;
}
</style>
